<template>
    <div class="el-row">
        <el-col :xs="2" :sm="5" :md="9" :lg="10" :xl="10">&nbsp;</el-col>
        <el-col :xs="20" :sm="12" :md="6" :lg="4" :xl="4">
            <div class="signin">
                <h3>{{  title }}</h3>
                <el-form ref="form">
                    <el-form-item>
                        <el-input  placeholder="用户名"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input  placeholder="密 码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-radio-group>
                            <el-checkbox label="记住我"></el-checkbox>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="login" style="width:46%;" :loading="logining">登录</el-button>
                        <el-button style="width:46%;" @click="forgetPassword">忘记密码?</el-button>
                    </el-form-item>
                </el-form> 
            </div>
        </el-col>
        <el-col :xs="2" :sm="5" :md="9" :lg="10" :xl="10">&nbsp;</el-col>               
    </div>
</template>

<script>
export default {
    name: 'SignIn',
    data() {
        return {
            title: '登录',
            logining: false
        }
    },
    methods: {
        login() {
            this.logining = true;
            this.$router.push({ name: 'home'});
        },
        forgetPassword() {
            this.$notify.success({
            title: '系统提示',
            message: '密码都忘了?去死吧...',
            showClose: false
            });
        }          
    }    
}
</script>
<style>
    .signin{
        background: #fff;
        margin-top: 160px;
        padding: 20px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        transition: opacity .3s,transform .3s,left .3s,right .3s,top .4s,bottom .3s;
    }
    .signin h3{
        text-align: center;
        font-weight: normal;
        color: #606266
    }
</style>
